<template>
  <div>
    <el-tag
      v-for="(tag ,index) in tabList"
      :key="tag.label"
      :closable="tag.name !== 'home'"
      :effect="$route.name===tag.name ?'dark':'plain'"
      @click="changeMenu(tag)"
      @close="handleClose(tag,index)"
    >
      {{ tag.label }}

    </el-tag>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  name: "CommonTag",
  computed: {
    ...mapState("tabAbout", ["tabList"]),
  },
  methods:{
    ...mapMutations('tabAbout',['closeTag']),
    //点击路由跳转功能
    changeMenu(item){
       this.$router.push({name:item.name})
    },
    //更新tag
    handleClose(item,index){
      this.closeTag(item)
      const length=this.tabList.length
      if(item.name!==this.$route.name){
        return
      }
      if(index===length){
        this.$router.push({
          name:this.tabList[index-1].name
        })

      }
      else{
        this.$router.push({
          name:this.tabList[index].name
        })

      }
    }
  }
};
</script>

<style lang="less" scoped>
.el-tag{
    margin: 10px 10px;
    cursor: pointer;
}
</style>